import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_yn_goods/config/app_color.dart';
import 'package:flutter_yn_goods/config/app_translations.dart';
import 'package:flutter_yn_goods/widgets/appbar/common_app_bar.dart';
import 'package:flutter_yn_goods/widgets/button/common_button.dart';
import 'package:get/get.dart';


import 'modify_name_logic.dart';

class ModifyNamePage extends StatelessWidget {
  ModifyNamePage({Key? key}) : super(key: key);

  final logic = Get.put(ModifyNameLogic());
  final state = Get
      .find<ModifyNameLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonAppBar(
        title: LocaleKeys.edit_nickname.tr,
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        child: Column(
          children: [
            16.verticalSpaceFromWidth,
            Container(
              height: 52.w,
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12.w),
                color: Colors.black.withOpacity(0.04),
              ),
              alignment: Alignment.centerLeft,
              child: TextField(
                controller: state.textEditingController,
                style: TextStyle(color: AppColor.color282828, fontSize: 14.sp, fontWeight: FontWeight.w400),
                maxLength: 16,
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.all(0),
                  border: noneBorder,
                  focusedBorder: noneBorder,
                  enabledBorder: noneBorder,
                  hintStyle: TextStyle(color: AppColor.color999999, fontSize: 14.sp, fontWeight: FontWeight.w400),
                  hintText: LocaleKeys.enter_nickname.tr,
                  counterText: "",
                  isDense: true,
                ),
                onChanged: (text) {
                  state.onTextChanged(text);
                },
              ),
            ),
            44.verticalSpaceFromWidth,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 22.w),
              child: Obx(() {
                return CommonButton.expend(
                  title:LocaleKeys.save.tr,
                  height: 44.w,
                  enable: state.buttonEnable.value,
                  disableTextColor: AppColor.color86888F,
                  disableBackgroundColor: Colors.black.withOpacity(0.1),
                  onClick: (){
                    logic.saveName();
                  },
                );
              }),
            ),
          ],
        ),
      ),
    );
  }

  InputBorder get noneBorder {
    return const OutlineInputBorder(
      borderSide: BorderSide.none,
    );
  }
}
